<template>
  <div class="flexbc kf">
    <div style="background: #fff;">
      <i class="el-icon-arrow-left" style="font-size: 20px; border-radius: 0.1rem; padding: 0.1rem 0.4rem; font-size: 16px; cursor: pointer;" @click="$router.back(-1)">返回</i>
    </div>
    <div class="kf2">



        <div class="sp" style="padding-top: 0.2rem;">


          <div style="margin-bottom: 0.2rem; font-size: 30px; font-weight: bold; color: #515151;">{{list.title}}</div>
          <div class="kflexbc" >
            <div class="kflex">
              <div style="margin-bottom: 0.2rem; font-size: 16px; color: rgb(102, 102, 102); margin-right: 0.6rem;">商品编码：{{list.fetch_code}}</div>
              <div style="margin-bottom: 0.2rem; font-size: 16px; color: rgb(102, 102, 102); margin-right: 0.6rem;">运营商：
                <!-- <span v-if="list.operator == 10086">中国移动</span>
                <span v-if="list.operator == 10010">中国联通</span>
                <span v-if="list.operator == 10000">中国电信</span> -->
                <span v-if="list.operator == 10099">中国广电</span>
                <!-- <span v-if="list.operator == 11111">虚拟运营商</span> -->
              </div>
              <div style="margin-bottom: 0.2rem; font-size: 16px; color: rgb(102, 102, 102);">归属地：{{list.location}}</div>
            </div>

            <div class="kflex">
              <div style="margin-bottom: 0.2rem; font-size: 16px; color: rgb(102, 102, 102); margin-right: 0.6rem;">修改人：{{list.update_by}}</div>
              <div style="margin-bottom: 0.2rem; font-size: 16px; color: rgb(102, 102, 102); margin-right: 0.6rem;">发布时间：{{list.created_at}}</div>
              <div style="margin-bottom: 0.2rem; font-size: 16px; color: rgb(102, 102, 102);">修改时间：{{list.updated_at}}</div>
            </div>
          </div>
          <div class="kflexbc"  style="margin-bottom: 0.2rem; font-size: 16px; color: rgb(102, 102, 102); margin-right: 0.2rem;">允许销售平台：{{list.xspt}}</div>



          <div style=" margin-top: 50px; margin-bottom: 0.2rem; font-size: 24px;">商品核心信息</div>

          <div style="background: #fff; padding: 0.2rem; border-radius: 0.1rem; margin-bottom: 0.2rem;">
            <div class="kflexc">
                <div style="max-width: 2.5rem; flex: 1; margin-bottom: 0.2rem;">
                  <div style="color: rgb(153, 153, 153); font-size: 16px; margin-bottom: 0.1rem;">月租</div>
                  <div style="color: rgb(51, 51, 51); font-size: 30px;">{{list.yz}}</div>
                </div>
                <div style="max-width: 2.5rem; flex: 1;margin-bottom: 0.2rem;">
                  <div style="color: rgb(153, 153, 153); font-size: 16px; margin-bottom: 0.1rem;">语音通话</div>
                  <div style="color: rgb(51, 51, 51); font-size: 30px;">{{list.yyth}}</div>
                </div>
                <div style="max-width: 2.5rem; flex: 1;margin-bottom: 0.2rem;">
                  <div style="color: rgb(153, 153, 153); font-size: 16px; margin-bottom: 0.1rem;">通用流量</div>
                  <div style="color: rgb(51, 51, 51); font-size: 30px; color: #2974FF;">{{list.tyll}}</div>
                </div>
                <div style="max-width: 2.5rem; flex: 1;margin-bottom: 0.2rem;">
                  <div style="color: rgb(153, 153, 153); font-size: 16px; margin-bottom: 0.1rem;">定向流量</div>
                  <div style="color: rgb(51, 51, 51); font-size: 30px;">{{list.dxll}}</div>
                </div>
            </div>
            <div style="font-size: 16px; color: rgb(119, 119, 120); background: rgb(242, 245, 255); padding: 0.1rem 0.2rem; border-radius: 10px; color:#0C83FF;">
              {{list.yzxq}}
            </div>
          </div>

          <div style="margin-bottom: 0.2rem; color: rgb(51, 51, 51); font-size: 20px;">口播话术</div>
          <div style="margin-bottom: 0.4rem; color: rgb(102, 102, 102);">{{list.play_info}}</div>

          <div style="margin-bottom: 0.2rem; color: rgb(51, 51, 51); font-size: 20px;">注意点</div>
          <div style="margin-bottom: 0.4rem; color: rgb(102, 102, 102);">{{list.alert_info}}</div>

          <div style="margin-bottom: 0.2rem; color: rgb(51, 51, 51); font-size: 20px;">办理条件</div>
          <div class="kflexc" >
            <div class="kflexc" style="margin-bottom: 0.2rem; font-size: 16px;">
              <div style="width:140px; color: rgb(153, 153, 153);">办理年龄</div>
              <div v-if="list.max_age" style="width: 180px; color: rgb(102, 102, 102);">{{list.min_age}}  -  {{list.max_age}}岁</div>
              <div v-if="!list.max_age && !list.min_age" style="width: 180px; color: rgb(102, 102, 102);">不限制</div>
            </div>
            <div class="kflexc" style="margin-bottom: 0.2rem; font-size: 16px;">
              <div style="width:140px; color: rgb(153, 153, 153);">下单数量限制</div>
              <div style="width: 180px; color: rgb(102, 102, 102);" v-if="list.max_purchase == -1 ">不限制</div>
              <div style="width: 180px; color: rgb(102, 102, 102);" v-if="list.max_purchase != -1 ">{{list.max_purchase}}</div>
            </div>
          </div>
          <!-- <div class="kflexc" style="margin-bottom: 0.2rem; font-size: 16px;">
            <div class="kflexc">
              <div style="width:100px; color: rgb(153, 153, 153);">发货区域</div>
              <div style="width: 180px; color: rgb(102, 102, 102);">{{list.deliver_province}}</div>
            </div>
          </div> -->
          <div class="kflexc"  v-if="list.warn_area_type == 1">
            <div class="kflexc" style="margin-bottom: 0.2rem; font-size: 16px;">
              <div style="width:100px; color: rgb(153, 153, 153);" >不发货区域</div>
              <div style=" color: rgb(102, 102, 102);" >
                <div class="kflexc" >
                  <div style="margin-right:20px; font-size: 14px;" v-for="(item,index) in list.warn_city" :key="index">
                    <div v-for="item2 in Object.keys(item)">{{item2}}/{{item[item2]}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="kflexc"   v-if="list.warn_area_type == 2">
            <div class="kflexc" style="margin-bottom: 0.2rem; font-size: 16px;">
              <div style="width:100px; color: rgb(153, 153, 153);" >只发货区域</div>
              <div style=" color: rgb(102, 102, 102); max-width: 90%;" >
                <div class="kflexc" >
                  <div style="margin-right:20px; font-size: 14px;" v-for="(item,index) in list.deliver_province" :key="index">{{item[0]}}/{{item[1]}}</div>
                </div>
              </div>
            </div>
          </div>



          <div style=" margin-top: 50px; margin-bottom: 0.2rem; font-size: 20px;">其他信息</div>

          <div class="kflexc" >
            <div class="kflexc" style="margin-bottom: 0.2rem; font-size: 16px;">
              <div style="width:100px; color: rgb(153, 153, 153);">商品优惠期：</div>
              <div style="width: 180px; color: rgb(102, 102, 102);">{{list.tcyhq}}</div>
            </div>
            <div class="kflexc" style="margin-bottom: 0.2rem; font-size: 16px;">
              <div style="width:100px; color: rgb(153, 153, 153);">是否支持5G</div>
              <div style="width: 180px; color: rgb(102, 102, 102);">{{list.is_5g}}</div>
              <div v-if="list.is_xc == 0" style="color: rgb(0, 158, 44);">可宣传</div>
              <div v-if="list.is_xc == 1" style="color: rgb(255, 0, 18);">不可宣传</div>

            </div>
          </div>

          <div class="kflexc">
            <div class="kflexc" style="margin-bottom: 0.2rem; font-size: 16px;">
              <div style="width:100px; color: rgb(153, 153, 153);">商品合约期</div>
              <div style="width: 180px; color: rgb(102, 102, 102);">{{list.sphyq}}</div>
            </div>
            <div class="kflexc" >
              <div class="kflexc" style="margin-bottom: 0.2rem; font-size: 16px;">
                <div style="width:100px; color: rgb(153, 153, 153);">销户方式</div>
                <div style="width: 180px; color: rgb(102, 102, 102);">{{list.xhfs}}</div>
              </div>
              <div class="kflexc" style="margin-bottom: 0.2rem; font-size: 16px;">
                <div style="width:100px; color: rgb(255, 0, 18);">销户违约金</div>
                <div style="width: 180px; color: rgb(255, 0, 18);">{{list.xhwyj}}元</div>
              </div>
            </div>
          </div>

          <div class="kflexc" >
            <div class="kflexc" style="margin-bottom: 0.2rem; font-size: 16px;">
              <div style="width:100px; color: rgb(153, 153, 153);">激活时效</div>
              <div style="width: 180px; color: rgb(102, 102, 102);">{{list.jhsx}}</div>
            </div>
          </div>

          <div class="kflexc" >
            <div class="kflexc" style="margin-bottom: 0.2rem; font-size: 16px;">
              <div style="width:100px; color: rgb(153, 153, 153);">套外资费</div>
              <div style="color: rgb(102, 102, 102);">{{list.twzf}}</div>
            </div>
          </div>

          <div style="margin-bottom: 0.2rem;  margin-top: 50px; font-size: 20px;">生产配置</div>

          <div class="kflexc" >
            <div class="kflexc" style="margin-bottom: 0.2rem; font-size: 16px;">
              <div style="width:100px; color: rgb(153, 153, 153);">是否需要照片</div>
              <div style="width: 180px; color: rgb(102, 102, 102);" v-if="list.need_num == 1">需要</div>
              <div style="width: 180px; color: rgb(102, 102, 102);" v-if="list.need_num == 0">不需要</div>
            </div>
          </div>

          <div class="kflexc" >
            <div class="kflexc" style="margin-bottom: 0.2rem; font-size: 16px;">
              <div style="width:100px; color: rgb(153, 153, 153);">商品注意点</div>
              <div style=" color: rgb(102, 102, 102); max-width: 90%;" >{{list.alert_info}}</div>
            </div>
          </div>

          <div style="margin-bottom: 0.2rem;  margin-top: 50px; font-size: 20px;">商品详情</div>


          <div style=" color: rgb(102, 102, 102); margin-bottom: 0.2rem; max-width: 90%; position: relative; overflow: hidden; margin-right: 5px;  transition: all 0.5s;" :style="{'height':h}">
            <div v-if="h == '200px'" style="position: absolute; right: 10px; top: 0px; color: #0C83FF; cursor: pointer;" @click="h = 'auto'">展开 <i class="el-icon-arrow-down"></i></div>
            <div v-if="h == 'auto'" style="position: absolute; right: 10px; top: 0px; color: #0C83FF; cursor: pointer;" @click="h = '200px'">收起 <i class="el-icon-arrow-up"></i></div>
            <div v-html="list.tcxxxx"></div>
          </div>

          <div class="kflexc" style="margin-bottom: 0.4rem; gap: 20px;">
            <div style="background: #fff; padding: 0.2rem; border-radius: 0.1rem;">
              <div style="margin-bottom: 0.2rem; color: rgb(51, 51, 51);">发货</div>
              <div class="kflexc" >
                <div class="kflexc" style="margin-bottom: 0.2rem; font-size: 16px;">
                  <div style="width:100px; color: rgb(153, 153, 153);">物流公司：</div>
                  <div style="width: 180px; color: rgb(102, 102, 102);">{{list.wlfs}}</div>
                </div>
              </div>
              <div class="kflexc" >
                <div class="kflexc"style="margin-bottom: 0.2rem; font-size: 16px;">
                  <div style="width:100px; color: rgb(153, 153, 153);">发货时效：</div>
                  <div style="width: 180px; color: rgb(102, 102, 102);">{{list.fhsx}}</div>
                </div>
                <div class="kflexc"style="margin-bottom: 0.2rem; font-size: 16px;">
                  <div style="width:100px; color: rgb(153, 153, 153);">发货回传：</div>
                  <div style="width: 180px; color: rgb(102, 102, 102);">{{list.sjhc}}</div>
                </div>
              </div>
            </div>

            <div style="background: #fff; padding: 0.2rem; border-radius: 0.1rem; ">
              <div style="margin-bottom: 0.2rem; color: rgb(51, 51, 51);">激活</div>
              <div class="kflexc">
                <div class="kflexc" style="margin-bottom: 0.2rem; font-size: 16px;">
                  <div style="width: 100px; color: rgb(153, 153, 153);">激活方式：</div>
                  <div style="width: 180px; color: rgb(102, 102, 102);">{{list.jhfs}}</div>
                </div>
              </div>
              <div class="kflexc">
                <div class="kflexc" style="margin-bottom: 0.2rem; font-size: 16px;">
                  <div style="width: 100px; color: rgb(153, 153, 153);">充值方式：</div>
                  <div style="width: 180px; color: rgb(102, 102, 102);">{{list.czfs}}</div>
                </div>
                <div class="kflexc" style="margin-bottom: 0.2rem; font-size: 16px;">
                  <div style="width: 100px; color: rgb(153, 153, 153);">充值金额：</div>
                  <div style="width: 180px; color: rgb(102, 102, 102);">{{list.czje}}</div>
                </div>
              </div>
            </div>
          </div>

          <div style="margin-bottom: 0.2rem; margin-top: 50px; font-size: 20px; ">更新日志</div>
          <div style="margin-bottom: 0.4rem; color: #999;">
            <div v-for="item in list.logs" :key="item.id">
              <div class="kflexc">
                <div>{{item.created_at}} {{item.user_name}} {{item.content}}</div>
              </div>
            </div>
          </div>

          <div style="margin-bottom: 0.2rem;  margin-top: 50px; font-size: 20px;">详情图</div>
          <div v-for="(item,index) in list.yy_image" key="index" style="margin-bottom: 0.4rem; margin-right: 0.2rem; width: 120px; cursor: pointer;">
            <img :src="item" @click="kandatu(item)" style="max-width: 100%;">
          </div>

          <div style="margin-bottom: 0.2rem;  margin-top: 50px; font-size: 20px;">附件</div>

          <div  style="margin-top: 50px;" class="kflexc">
            <div>
              <img :src="list.zl_image" @click="kandatu(list.zl_image)" style="width: 100px; cursor: pointer;">
            </div>
            <div style="color: #2776FD; margin-left: 50px;  cursor: pointer;" @click="xiazai(list.fu_jian)">附件下载</div>
          </div>

        </div>

    </div>


    <van-popup v-model:show="show2" position="center" style="width: 80%;">
      <div style="width: 100%; padding: 10px; box-sizing: border-box;" class="kflexcc">
        <img :src="src" style="max-width: 100%;">
      </div>
    </van-popup>
  </div>
</template>

<script>
  import axios from 'axios'
  import moment from "moment";
  import XLSX from 'xlsx';
  import {
      read,utils
    } from 'xlsx'

  export default {
    name: "kf",
    data() {
      return {
        show:false,
        searchs:{},
        list:{},
        src:"",
        show2:false,
        h:'200px',
      }
    },
    created() {
      this.getlist()

    },
    mounted() {
      if(document.documentElement.clientWidth > 1000){
        var h = document.documentElement.clientWidth / 19.2 + 'px';
        document.documentElement.style.fontSize = h;
      }else{
        var h = document.documentElement.clientWidth / 7.5 + 'px';
        document.documentElement.style.fontSize = h;
      }

    },
    methods: {
      xiazai(url,name){
        const a = document.createElement('a');
        a.setAttribute('download', '附件');
        a.setAttribute('href',url );
        a.click();
      },
      kandatu:function(item){
        this.src = item
        this.show2 = true
        // window.open(item)
      },
      //获取列表
      getlist: function() {
        axios.get('/api/gth/information/findInfoWithIdShare?id='+this.$route.query.id)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data

              if(this.list.yy_image){
                this.list.yy_image = this.list.yy_image.split(',')
              }else{
                this.list.yy_image = []
              }
              console.log(this.list.yy_image)
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .kf { min-height: 100vh;  font-size: 16px;
    /deep/ .el-input{ display: none;}
    .kfli{ padding: 0.1rem 0 0.1rem 0.3rem; cursor: pointer; font-size: 14px;}
    .kf2{ width: 100%;  height: 100%; background: rgb(250, 250, 250); box-sizing: border-box;}
    .xb{ background: rgb(242, 245, 255); color: rgb(102, 102, 102); padding: 0.1rem 0.2rem; border-radius: 0.1rem; margin-right: 0.2rem; margin-bottom: 0.2rem; font-size: 12px;}
    .sp{ padding: 0.4rem; font-size: 16px; border-radius: 0.1rem;  margin-bottom: 0.2rem; }
  }
</style>
